import React, { useState, useEffect, useRef } from 'react'
import './myscss/Income.scss'

import ReactECharts from 'echarts-for-react';
import axios from 'axios';

import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Income() {
    let navigate = useNavigate();
   

    let option = {
        title: {
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1248, name: '问诊:70%' },
                    { value: 535, name: '挂号:20%' },
                    { value: 300, name: '开药:10%' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
 
    // 使用 useEffect 设置定时器
    useEffect(() => {

    }, []); // 空数组作为第二个参数，表示只在组件挂载和卸载时运行
    return (
        <div id='Income'>
            <div id="main">
              
                <div className='fans_length'>
                    <b onClick={() => { navigate('/mine') }}>&lt;</b><span>我的收入</span>
                </div>


            </div>
            <div id="Income_center">
                <div>
                    <p>本月收入(税前)</p>
                </div>

                <div>
                    <h3>￥2290.00</h3>
                </div>
                <div className="dd">
                    <div>
                        <p>订单总数
                            <p>23456</p>
                        </p>
                    </div>
                    <div>
                        <p>累计收入
                            <p>￥234234.7</p>
                        </p>
                    </div>
                </div>
            </div>
            <div id="Income_echarts">
                <h2>本月收入情况</h2>
                <p onClick={()=>{navigate('/MinPage/Order_details')}}>订单明细</p>
                <div id='ecgarts'>
                    <ReactECharts option={option} />
                </div>

            </div>
            <div id="settlement">
                <h3>结算记录</h3>
                <hr />
               <div className="jilu">
                <div>
                    <h2>08月</h2>
                    <p>2024年</p>
                </div>
                <div>
                    <p>收入￥1243</p>
                    <p>订单:10</p>
                    <p>结算时间:2024-9-01</p>
                </div>
               </div>
               <hr />
               <div className="jilu">
                <div>
                    <h2>07月</h2>
                    <p>2024年</p>
                </div>
                <div>
                    <p>收入￥1243</p>
                    <p>订单:10</p>
                    <p>结算时间:2024-8-01</p>
                </div>
               </div>
               <hr />
               <div className="jilu">
                <div>
                    <h2>06月</h2>
                    <p>2024年</p>
                </div>
                <div>
                    <p>收入￥1243</p>
                    <p>订单:10</p>
                    <p>结算时间:2024-7-01</p>
                </div>
               </div>
               <hr />
               <div className="jilu">
                <div>
                    <h2>05月</h2>
                    <p>2024年</p>
                </div>
                <div>
                    <p>收入￥1243</p>
                    <p>订单:10</p>
                    <p>结算时间:2024-6-01</p>
                </div>
               </div>
               <hr />
            </div>
        </div>
    )
}

// export default Line;
